<template>
	<view class="container p-bottom" v-if=" express.express_name ">
		<!-- 物流公司 -->
		<view class="flow-all-money dis-flex b-f padding-box">
			<view class="flex-box">
				<view class="dis-flex flow-all-list-cont">
					<text class="col-7">物流公司: {{express.express_name}}</text>
				</view>
				<view class="dis-flex flow-all-list-cont">
					<text class="col-7" selectable="true">物流单号: {{express.express_no}}</text>
				</view>
			</view>
		</view>
		<!-- 物流动态 -->
		<view class="logis-detail m-top20 b-f">
			<view class="logis-item" :class="index === 0 ? 'first' : ''" v-for="(item,index) in express.list " :key="index"
			 :v-for-item="item">
				<view class="logis-item-content">
					<view class="logis-item-content__describe">
						<text class="f-26">{{ item.context }}</text>
					</view>
					<view class="logis-item-content__time">
						<text class="f-22">{{ item.ftime }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: {},
				express: {},
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// 获取物流动态
			this.getExpressDynamic(options.order_id);
		},
		methods: {

			/**
			 * 获取物流动态
			 */
			getExpressDynamic: function(order_id) {
				let _this = this;
				_this._get('user.order/express', {
						order_id
					}, function(result) {
						_this.setData(result.data);
					},
					function() {
						uni.navigateBack();
					});
			},

		}
	}
</script>

<style>
	.logis-detail {
		padding: 30upx;
	}

	.logis-detail .logis-item {
		position: relative;
		padding: 10px 0 10px 25px;
		box-sizing: border-box;
		border-left: 2px solid #ccc;
	}

	.logis-detail .logis-item.first {
		border-left: 2px solid #f40;
	}

	.logis-detail .logis-item:after {
		content: ' ';
		display: inline-block;
		position: absolute;
		left: -6px;
		top: 30px;
		width: 6px;
		height: 6px;
		border-radius: 10px;
		background: #bdbdbd;
		border: 2px solid #fff;
	}

	.logis-detail .logis-item.first:after {
		background: #f40;
	}

	.logis-detail .logis-item .logis-item-content {
		position: relative;
		background: #f9f9f9;
		padding: 10upx 20upx;
		box-sizing: border-box;
		color: #666;
	}

	.logis-detail .logis-item.first .logis-item-content {
		background: #ff6e39;
		color: #fff;
	}

	.logis-detail .logis-item .logis-item-content:after {
		content: '';
		display: inline-block;
		position: absolute;
		left: -10px;
		top: 18px;
		border-left: 10px solid #fff;
		border-bottom: 10px solid #f3f3f3;
	}

	.logis-detail .logis-item.first .logis-item-content:after {
		border-bottom-color: #ff6e39;
	}
</style>
